<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../../css/iconfont.css">
		<style>
			.mui-content-padded{margin:5px 0 0 0;}
			.mui-row-list span{float: left; line-height:33px; width:20%;}
			.mui-row-list select{float: left; line-height:14px; font-size:14px; margin-top:2px; margin-left: 5px;}
			.mui-btn-block{margin-bottom:0; padding:6px;}
			.mui-col-sm-12{ border-top: 1px solid #D1D1D1; width:100%; padding-top:5px; font-size:14px;}
			input[type="text"]{height:30px; margin-bottom: 5px;}
			input[readonly="readonly"]{ text-align: left; padding-left: 5px; padding-right: 0;}
			input{border-width: 0; height: 26px; float: right; text-align: right; padding-right: 15px;}
			form:before{ background: none !important; border: none !important;}
			.mui-switch:before {content: '否'; color: #999;}
			.mui-switch.mui-active:before {content: '是'; color: #fff;}
			.mui-switch.two:before {content: '正常'; color: #999;}
			.mui-switch.two.mui-active.two:before {content: '撤销'; color: #fff;}
			.mui-table-view-cell.mui-active{ display:block;}
			.border0{border-width: 0; border-bottom: #dddddd 1px solid;}
			.ui-alert{font-size: 14px;}
			#Popup {
				width: 0px;
				height: 0px;
				background: red;
				position: fixed;
				top: 70%;
				left: 50%;
			}
			.mui-popover{
				width: 300px;
			}
			.mui-popover .mui-popover-arrow:after {
				width: 0px;
			}
			.mui-switch{
				border-color: #fd933b;
				background-color: #fd933b;
				border-width: 1px;
			}
			.mui-switch:before {content: '选择'; color: #fff; right: 10px;}
			.mui-switch.mui-active:before {content: '填写'; color: #fff; left: 10px;}
			.mui-switch.mui-active {
				border-color: #007AFF;
				background-color: #007AFF;
			}
			.popover-cont ul{
				margin-top: 5px; 
				margin: 0; 
				padding: 0; 
				list-style: none; 
				background: #ffffff;
			}
			.table{
				width: 100%;
			}
			.thead{
				width: 100%;
				border: 1px solid #007AFF;
			}
			.thead tr{
				 width: 100%; 
				 background-color: #007AFF;
				 height: 20px;
			}
			.thead tr th{
				color: #ffffff;
				border-right: 1px solid #ffffff;
				text-align: center;
				font-family: "microsoft yahei";
				font-size: 14px;
				line-height: 20px;
			}
			.tbody{
				width: 100%;
				border: 1px solid #007AFF;
			}
			.tbody tr{
				 width: 100%; 
				 height: 20px;
			}
			.tbody tr td{
				color: #000;
				border: 1px solid #007AFF;
				text-align: center;
				font-family: "microsoft yahei";
				font-size: 14px;
				line-height: 20px;
			}
			.div-tab{
				width: 100%; 
				height: 200px; 
				overflow-y: scroll;
			}
			.div-tab::-webkit-scrollbar {
				display: none;
			}
			.submit{
				margin:0 auto 10px auto; 
				width:200px; 
				height:35px; 
				line-height: 35px; 
				background-color:#007AFF; 
				text-align: center; 
				color: #FFFFFF; 
				border-radius: 10px;
				margin-top: 10px;
			}
		</style>
	</head>
	<body id="life_power">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="high_id">生活自理</h1>
		</header>
		<div class="mui-conten" style="margin-top:50px;">
			<ul class="mui-table-view" style="margin-top: 5px;">
				<div class="mui-row">
					<div class="mui-col-sm-12 mui-col-xs-12">
						<li class="mui-table-view-cell">
							<a data-options='{"type":"date"}' class="btn mui-navigate-right">
								<div style="float: left; font-size: 14px; width: 90px; line-height: 26px;">随访日期</div>
								<input  id='result0' class="ui-alert"  placeholder="请选择" style="width:50%;"/>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<div style="float: left; font-size:16px;">随访医生</div>
							<div class="mui-switch" id="mySwitch3">
							  <div class="mui-switch-handle"></div>
							</div>
						</li>
						<li class="mui-table-view-cell" id="tigshow_doc_1">
							<a>
								<input class="ui-alert"  placeholder="请输入" style="width:50%; text-align: right; float: right; padding-right: 15px;"/>
							</a>
							<!-- <div style="display: none; margin-top:10px; text-align: right;" id="tigshow_drug">
								<button id="popbtm">添加省内其他院的随访医生</button>
							</div> -->
						</li>
						<li class="mui-table-view-cell" style="display: none;" id="tigshow_doc_2">
							<div style="float: left; width:100%;">
								<div style="float: left; font-size: 16px; width:5rem; text-align:center;">医院</div>
								<input id='text-doc' class="ui-alert bottom_soild"  placeholder="请输入" style="width:60%; margin-left: 6px;"/>
							</div>
							<div style="float: left; width:100%;">
								<div style="float: left; font-size: 16px; width:5rem; text-align:center;">医生</div>
								<input id='text-hosp' class="ui-alert bottom_soild"  placeholder="请输入" style="width:60%; margin-left: 6px;"/>
							</div>
						</li>
					</div>
				</div>
			</ul>
			<ul class="mui-table-view" style="margin-top: 10px;">
				<div class="mui-row">
					<div class="mui-col-sm-12 mui-col-xs-12">
						<li class="mui-table-view-cell">
							<a data-options='{"type":"date"}' class="btn mui-navigate-right">
								<div style="float: left; font-size: 16px; width: 98%; overflow: hidden; text-overflow:ellipsis; font-weight: bold;">
									进餐,使用餐具将饭菜送入口、咀嚼、吞咽等活动
								</div>
								<input  id='result1' class="ui-alert"  placeholder="请选择" style="width:100%; overflow: hidden; text-overflow:ellipsis; text-align: left;"/>
							</a>
						</li>
					</div>
					<div class="mui-col-sm-12 mui-col-xs-12">
						<li class="mui-table-view-cell">
							<a data-options='{"type":"date"}' class="btn mui-navigate-right">
								<div style="float: left; font-size: 16px; width: 98%; overflow: hidden; text-overflow:ellipsis; font-weight: bold;">
									梳洗:梳头、洗脸、刷牙、剃须洗澡等等活动
								</div>
								<input  id='result2' class="ui-alert"  placeholder="请选择" style="width:100%;overflow: hidden; text-overflow:ellipsis; text-align: left;"/>
							</a>
						</li>
					</div>
					<div class="mui-col-sm-12 mui-col-xs-12">
						<li class="mui-table-view-cell">
							<a data-options='{"type":"date"}' class="btn mui-navigate-right">
								<div style="float: left; font-size: 16px; width: 98%; overflow: hidden; text-overflow:ellipsis; font-weight: bold;">
									穿衣:穿衣裤、袜子、鞋子等活动
								</div>
								<input  id='result3' class="ui-alert"  placeholder="请选择" style="width:100%;overflow: hidden; text-overflow:ellipsis; text-align: left;"/>
							</a>
						</li>
					</div>
					<div class="mui-col-sm-12 mui-col-xs-12">
						<li class="mui-table-view-cell">
							<a data-options='{"type":"date"}' class="btn mui-navigate-right">
								<div style="float: left; font-size: 16px; width: 98%; overflow: hidden; text-overflow:ellipsis; font-weight: bold;">
									如侧:小便、大便等活动及自控
								</div>
								<input  id='result4' class="ui-alert"  placeholder="请选择" style="width:100%;overflow: hidden; text-overflow:ellipsis; text-align: left;"/>
							</a>
						</li>
					</div>
					<div class="mui-col-sm-12 mui-col-xs-12" id="other">
						<li class="mui-table-view-cell">
							<a data-options='{"type":"date"}' class="btn mui-navigate-right">
								<div style="float: left; font-size: 16px; width: 98%; overflow: hidden; text-overflow:ellipsis; font-weight: bold;">
									活动:站立、室内行走、上下楼梯、户外活动
								</div>
								<input  id='result5' class="ui-alert"  placeholder="请选择" style="width:100%;overflow: hidden; text-overflow:ellipsis; text-align: left;"/>
							</a>
						</li>
					</div>
				</div>
			</ul>
			<div onclick="submit()" class="submit" >提交</div>
		</div>
		<script src="../../js/mui.js"></script>
		<script src="../../js/mui.picker.min.js"></script>
		<script src="../../js/jquery.min-1.11.1.js"></script>
		<script type="text/javascript">
			//提交
			function submit(){
					 
				}	
			mui.init()
				(function($) {
				$.init();
				var result = $('#result')[0];
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var _self = this;
						if(_self.picker) {
							_self.picker.show(function (rs) {
								$('#result'+i)[0].value = rs.text;
								//result.innerText = rs.text;
								_self.picker.dispose();
								_self.picker = null;
							});
						} else {
							if(i == 0){
								var optionsJson = this.getAttribute('data-options') || '{}';
								var options = JSON.parse(optionsJson);
								var id = this.getAttribute('id');
								_self.picker = new $.DtPicker(options);
								_self.picker.show(function(rs) {
									$('#result'+i)[0].value = rs.text;
									_self.picker.dispose();
									_self.picker = null;
									addclass()
								});
								//hide()
							}else if(i == 1){
								var picker = new mui.PopPicker();
								 picker.setData([{value:'1',text:'独立完成'},{value:'2',text:'需要协助,如切碎,搅拌食物等'},{value:'3',text:'完全需要帮助'}]);
								 picker.show(function (selectItems) {
									 $('#result'+i)[0].value = selectItems[0].text;
								  })
							}else if(i == 2){
								var picker = new mui.PopPicker();
								 picker.setData([{value:'1',text:'独立完成'},{value:'2',text:'能独立的洗头,梳头,洗脸,洗脸,刷牙,剃须等;洗澡需要协助,'},{value:'3',text:'在协助下和适当的时间内,能完成分梳活动'},{value:'4',text:'完全需要帮助'}]);
								 picker.show(function (selectItems) {
									 $('#result'+i)[0].value = selectItems[0].text;
								  })
							}else if(i == 3){
								var picker = new mui.PopPicker();
								 picker.setData([{value:'1',text:'独立完成'},{value:'2',text:'需要协助,在适当的时间内完成部分穿衣'},{value:'3',text:'完全需要帮助'}]);
								 picker.show(function (selectItems) {
									 $('#result'+i)[0].value = selectItems[0].text;
								  })
							}else if(i == 4){
								var picker = new mui.PopPicker();
								 picker.setData([{value:'1',text:'不需要协助,可自控'},{value:'2',text:'偶尔失禁,但基本上能如厕或使用便具'},{value:'3',text:'经常失禁,在很多提示和协助下尚能如厕或使用便具'},{value:'3',text:'完全失禁,完全需要帮助'}]);
								 picker.show(function (selectItems) {
									 $('#result'+i)[0].value = selectItems[0].text;
								  })
							}else if(i == 5){
								var picker = new mui.PopPicker();
								 picker.setData([{value:'1',text:'独立完成所有活动'},{value:'2',text:'借助较小的外力或辅助装置能完成站立、行走、上下楼梯等'},{value:'3',text:'借助较大的外力才能完成站立、行走、上下楼梯等'},{value:'4',text:'卧床不起,活动完全需要帮助'}]);
								 picker.show(function (selectItems) {
									 $('#result'+i)[0].value = selectItems[0].text;
								  })
							}else{
								var optionsJson = this.getAttribute('data-options') || '{}';
								var options = JSON.parse(optionsJson);
								var id = this.getAttribute('id');
								/*
								 * 首次显示时实例化组件
								 * 示例为了简洁，将 options 放在了按钮的 dom 上
								 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
								 */
								_self.picker = new $.DtPicker(options);
								_self.picker.show(function(rs) {
									/*
									 * rs.value 拼合后的 value
									 * rs.text 拼合后的 text
									 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
									 * rs.m 月，用法同年
									 * rs.d 日，用法同年
									 * rs.h 时，用法同年
									 * rs.i 分（minutes 的第二个字母），用法同年
									 */
									$('#result'+i)[0].value = rs.text;
									/* 
									 * 返回 false 可以阻止选择框的关闭
									 * return false;
									 */
									/*
									 * 释放组件资源，释放后将将不能再操作组件
									 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
									 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
									 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
									 */
									_self.picker.dispose();
									_self.picker = null;
								});
							}
						}
					}, false);
				});
			})(mui);
			//监听
			// $(".mui-backdrop").on("click",function(){
			// 	alert(56)
			// })
			var obj = document.getElementById('life_power');
			obj.addEventListener('touchend', function(event) {
				 //如果这个元素的位置内只有一个手指的话
				 $(".mui-btn").addClass("zzzzzzzzzz")
				 if($(".mui-btn").hasClass("zzzzzzzzzz")){
					 console.log(58)
				 }
			}, false);
			//切换
			document.getElementById("mySwitch3").addEventListener("toggle",function(event){
				if(event.detail.isActive){
					document.getElementById("tigshow_doc_1").style.display="none";
					document.getElementById("tigshow_doc_2").style.display="block";
					doctorHospId = "0";//签名医生医院id
					doctorHospName = document.getElementById("text-hosp").value;//签名医生医院名字
					doctorId = "0";//签名医生id
					doctorName = document.getElementById("text-doc").value;//签名医生姓名
				}else{
					document.getElementById("tigshow_doc_1").style.display="block";
					document.getElementById("tigshow_doc_2").style.display="none";
					if(doctorId == ""){
						doctorHospId = "";//签名医生医院id
						doctorHospName = "";//签名医生医院名字
						doctorId = "";//签名医生id
						doctorName = "";//签名医生姓名
					}
				}
			})
		</script>
	</body>
</html>